<template>
	<view class="item-box ss-flex box-sizing ss-flex ss-row-between">
		<view class="fs-28">{{ label }}：</view>
		<view @tap.stop="changeAbsoluteValue" class="fs-28 fc-dark6 no_text">+/-</view>
		<input class="inputClass box-sizing ss-text-right" :value="modelValue" @input="getInputValue" :type="inputType" placeholder-class="fc-c5" />
	</view>
</template>

<script setup>
	const props = defineProps({
		label: {
			type: String,
			default: ''
		},
		modelValue: {
			type: [String,Number],
			default: ''
		},
		inputType:{
			type:String,
			default:'digit'
		}
	})
	const emits = defineEmits(['update:modelValue'])
	function getInputValue(e){
		emits('update:modelValue',e.detail.value)
	}
	function changeAbsoluteValue(){
		if(!props.modelValue) return
		emits('update:modelValue',props.modelValue > 0 ? -props.modelValue : Math.abs(props.modelValue))
	}
</script>

<style lang="scss" scoped>
	.item-box {
		width: 100%;
		height: 128rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #EEEEEE;
		padding: 20rpx 16rpx;
		.inputClass {
			// width: 175rpx;
			height: 88rpx;
			background: #F6F7F8;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 12rpx;
			font-size: 28rpx;
			margin-left: 16rpx;
		}
	}
</style>